<template>
	<view>
		<u-navbar :is-back="false" title="完善个人信息">
		</u-navbar>
		<u-form ref="uForm" class="u-p-l-20 u-p-r-20" label-width="150">
			<u-form-item label="姓名">
				<u-input v-model="userinfo.talentName" placeholder="请输入姓名" />
			</u-form-item>
			<u-form-item label="年龄">
				<u-input v-model.number="userinfo.talentAge" placeholder="请输入年龄" />
			</u-form-item>
			<u-form-item label="掌握技能">
				<view class="u-flex u-row" style="width: 100%;">
					<view class="u-flex-1">
						<view v-if="userinfo.talentTag.length==0" class="u-light-color" @click="showTag = true">请选择个性标签
						</view>
						<u-tag :text="tag" :type="getColor(index)" class="u-m-r-20"
							v-for="(tag,index) in userinfo.talentTag" :key="index" closeable @click="removeTag(index)"
							@close="removeTag(index)" />
					</view>
					<view class="u-input__right-icon--select u-input__right-icon__item u-m-r-20" @click="showTag = true"
						:class="{'u-input__right-icon--select--reverse': showTag}">
						<u-icon name="arrow-down-fill" size="26" color="#c0c4cc"></u-icon>
					</view>
				</view>
			</u-form-item>
			<u-form-item label="偏好领域">
				<view class="u-flex u-row" style="width: 100%;">
					<view class="u-flex-1">
						<view v-if="userinfo.pref.length==0" class="u-light-color" @click="showPref = true">请选择偏好领域
						</view>
						<u-tag :text="pref" :type="getColor(index)" class="u-m-r-20"
							v-for="(pref,index) in userinfo.pref" :key="index" closeable @click="removePref(index)"
							@close="removePref(index)" />
					</view>
					<view class="u-input__right-icon--select u-input__right-icon__item u-m-r-20"
						@click="showPref = true" :class="{'u-input__right-icon--select--reverse': showPref}">
						<u-icon name="arrow-down-fill" size="26" color="#c0c4cc"></u-icon>
					</view>
				</view>
			</u-form-item>
			<u-form-item label="简介" label-position="top" class="u-border-bottom">
				<u-input v-model="userinfo.talentIntro" type="textarea" height="200" placeholder="请输入简介" />
			</u-form-item>
			<u-button type="primary" class="u-m-l-20 u-m-r-20 u-m-t-20" @click="submit">提交</u-button>
			<u-popup v-model="showTag" mode="bottom" height="750" closeable>
				<view class="u-p-t-80 u-p-40">
					<u-tag :text="tag" :type="getColor(index)" class="u-m-r-20 u-m-b-20" v-for="(tag,index) in tags"
						:key="index" @click="tapTag(index)" />
				</view>
			</u-popup>
			<u-popup v-model="showPref" mode="bottom" height="750" closeable>
				<view class="u-p-t-80 u-p-40">
					<u-tag :text="pref" :type="getColor(index)" class="u-m-r-20 u-m-b-20" v-for="(pref,index) in prefs"
						:key="index" @click="tapPref(index)" />
				</view>
			</u-popup>
		</u-form>
	</view>
</template>

<script>
	import {
		config
	} from '../../config.js'
	export default {
		onLoad() {
			this.tags = config.skills;
			this.prefs = config.prefs;
			const eventChannel = this.getOpenerEventChannel();
			eventChannel.on('userinfo', res => {
				this.userinfo = res;
				this.from = 1;
			})
		},
		data() {
			return {
				userinfo: {
					talentName: "",
					talentAge: null,
					talentTag: [],
					pref: [],
					talentIntro: ""
				},
				showTag: false,
				showPref: false,
				tags: [],
				prefs: [],
				from: 0 //首次修改信息为0，否则为1
			}
		},
		methods: {
			getColor(index) {
				let type = ["primary", "success", "info", "warning", "error"];
				return type[index % 5];
			},
			tapTag(index) {
				this.userinfo.talentTag.push(this.tags[index]);
				this.tags.splice(index, 1)
			},
			removeTag(index) {
				this.tags.push(this.userinfo.talentTag[index]);
				this.userinfo.talentTag.splice(index, 1);
			},
			tapPref(index) {
				this.userinfo.pref.push(this.prefs[index]);
				this.prefs.splice(index, 1)
			},
			removePref(index) {
				this.prefs.push(this.userinfo.pref[index]);
				this.userinfo.pref.splice(index, 1);
			},
			async submit() {
				var [err, res] = await this.$to(this.$api.post({
					url: "/userinfo/update",
					data: this.userinfo
				}));
				if (!err && res.code == 200) {
					const eventChannel = this.getOpenerEventChannel()
					eventChannel.emit('savedUserinfo', this.userinfo);
					if (this.from == 0) {
						uni.reLaunch({
							url: "../main/main"
						});
					} else {
						uni.navigateBack();
					}
					this.$toast(res.msg);
				} else {
					this.$toast(err ? null : res.msg);
				}
			}
		}
	}
</script>
<style lang="scss">
	@import "../../uview-ui/libs/css/style.components.scss";

	.u-input {
		&__right-icon {

			&__item {
				margin-left: 10rpx;
			}

			&--select {
				transition: transform .4s;

				&--reverse {
					transform: rotate(-180deg);
				}
			}
		}
	}

	body {
		background-color: #FFFFFF;
	}
</style>
